HTML Style Guide & Test Suite

     Paraphrasing that old Chinese proverb, this document is designed to demonstrate that one example is more effective than 1,000 descriptive words.

     If you are viewing this document using Mosaic and would like to see the HTML source producing this display select File on the menu bar and then Document Source from the drop-down menu.

     The above table of contents is an unordered list. Each element is a hyperlink in the form of:

       <A HREF=#branch-name>branch-title</A>

The target anchor is in the form of:

       <A NAME=#branch-name>display-anchor-title</A>

HTML Headings

Heading One <H1>

Heading Two <H2>

Heading Three <H3>

Heading Four <H4>

Heading Five <H5>
Heading Six <H6>
Table of Contents

General Link Information

A hypertext link has two components, the visible and invisible parts. The visible part, called the anchor, is the highlighted portion that you see on your display. The invisible part is the component instructing the browser where to find the desired resource. The general format of a link is:

<A HREF=[transfer-protocol][web-location]resource-name> anchor-prompt</A>

Table of Contents

Links to Other Places Within the Same Document

The table of contents in this document uses internal links. There are two components required, the pointer and the branch location within the document. The pointer takes the form of:

<A HREF=#branch-label>title</A>

The pointer to this section is:

<A HREF=#SAME>To other places within the Same Document</A>

The desired location tag pair takes the form of:

<A NAME="branch-location"><title</A>

The target tag pair for this section is:

<A NAME="SAME"><Links to other places within the Same Document</A>

Table of Contents

Links to Other Resources at the Same Web Site

If the desired resource is located at the same Web site and uses the same protocol, all that is needed is the name of the resource. This pointer takes the form:

<A HREF=resource-name>anchor-prompt</A>

To illustrate, a file named SECOND.HTM which is located at the same site and in the same directory as the document currently being viewed would be fetched using the link:

<A HREF=SECOND.HTM>Click here to activate SECOND.HTM</A>

Table of Contents

Hypermedia Links in Web Space

An external link points to a resource at another Web site. As an example, my home page link is:

<A HREF=HTTP://www.charm.net/~lejeune>Urb's Home Page</A>

It would appear on you screen as: Urb's home page

Table of Contents

Plain Text

Most Web pages consist of plain text, which is any text appearing outside of an attribute tag pair. Web viewers ignore multiple spaces, tabs, and line breaks while "word-wrapping" text. You have no control over the display of plain text. If you desire a line break inserted in your text use the <BR> tag. To force a paragraph use the <P> tag.

Line one. <BR> Line two. <P> appears as:
Line one.
Line two.

If text is to be display with formatting retained, as an example a program listing, use the <PRE> </PRE> tag pair.

    Paragraphs are not indented, however, multiple blanks are inserted using a series of "&#160;" groupings. This paragraph starts with two such groupings.

Logical Text Styles

This sentence is normal text. Each of the following styles is enclosed between the tags indicating the style. Emphasized Text Strong Text Cited Text line break is next.

Physical Text Styles

 Bold Text Italics Text Underlined Text Typewriter Font Horizontal Rule <HR> is next

Inline Graphics

 An inline graphic is treated like a character, albeit a very large one, by graphical WWW browsers. The format for displaying an inline image is

<IMG [ALT="alternative-text"] [ALIGN=text-position] SRC=url-of-graphic>

Where "alternative-text" is the text that will be displayed, in lieu or the image on a non-graphic browser such as lynx.

The parameter for ALIGN= may be TOP, CENTER, or BOTTOM. This determines where one line of text will be display within the same paragraph.

Align Top Mosaic Image Goes Here Align Top

Align Middle Mosaic Image Goes Here Align Middle

Align Bottom Mosaic Image Goes Here Align Bottom

Table of Contents

Thumbnail Sketches

A thumbnail sketch is small graphic display that points to a larger version of the same graphic. It has the advantage of not requiring the full graphic to be transmitted and displayed unless the user specifically requests the larger display.

<A HREF=large-graphic-file><IMG SRC=thumb-nail-graphic-file> </A>

Click on the thumbnail graphic to activate a larger graphic.
The heavy border around the graphic indicates that the image is a pointer.

Table of Contents

Character Entities -- Special HTML Characters

These characters are formed using either the "&special-name;" or the "&#nnn;" (where nnn is the numeric code) format conventions. As an example the double quote is &quot; and the Yen symbol (¥) is "&#165 ;".

quot=", amp=&, lt=<, gt=>, iexcl=¡, cent=¢, pound=£, curren=¤, yen=¥, brvbar=¦, sect=§, uml=¨, copy=©, ordf=ª, laquo=«, not=¬, shy=­, reg=®, hibar=¯, deg=°, plusmn=±, sup2=², sup3=³, acute=´, micro=µ, para=¶, middot=·, cedil=¸, sub1=¹, ordm=º, raquo=», frac14=¼, frac12=½, frac34=¾, iquest=¿, Agrave=À, Aacute=Á, Acirc=Â, Atilde=Ã, Aumi=Ä, Aring=Å, AElig=Æ, Ccedil=Ç, Egrave=È, Eacute=É, Ecirc=Ê, Euml=Ë, Igrave=Ì, Iacute=Í, Icirc=Î, Iumi=Ï, ETH=Ð, Dstrok=Ð, Ntilde=Ñ, Ograve=Ò, Oacute=Ó, Ocirc=Ô, Otilde=Õ, Oumi=Ö, Oslash=Ø, Ugrave=Ù, Uacute=Ú, Ucirc=Û, Uuml=Ü, Yacute=Ý, THORN=Þ, szlig=ß, agrave=à, aacute=á, acirc=â, atilde=ã, aumi=ä, aring=å, aelig=æ, ccedil=ç, egrave=è, eacute=é, ecirc=ê, euml=ë, igrave=ì, iacute=í, icirc=î, iuml=ï, eth=ð, ntilde=ñ, ograve=ò, oacute=ó, ocirc=ô, otilde=õ, ouml=ö, oslash=ø, ugrave=ù, uacute=ú, ucirc=û, uuml=ü, yacute=ý, thorn=þ, yuml=ÿ

Table of Contents

HTML Lists

Ordered List <OL>
  1. <LI> Ordered List Item One
  2. <LI> This is Item Two
Unordered List <UL>
Directory List <DIR>
  • <LI> Directory List Item One
  • <LI> This is Item Two
    • Definition List <DL>
    <DT> Definition List first entry to be defined
    <DD> Definition of first entry
    <DT> Second entry to be defined
    <DD> Definition of second entry
    Two Unordered Lists <UL> Nested within an Ordered List <OL>
    1. <LI> Major List Item One
      • <LI> First Nested List Item One
      • <LI> First Nested List Item Two
    2. <LI> Major List Item Two
      • Second Nested List Item One
      • <LI> Second Nested List Item Two
    Menu List <MENU>
    Menu List <MENU> not correctly implemented by Mosaic
    Everything below a menu list is indented.

  • <LI> First Menu List Item
  • <LI> Second Menu List Item

    • Table of Contents   

    Urban A. LeJeune,  click to see my home page
lejeune@acy.digex.net       Last Document Updated November 8, 1994
43 Willis Drive
Tuckerton, NJ 08087

    Please mail me any comments or suggestions about this document Click below to send e-mail.

    lejeune@acy.digex.net